<template>
	<view>
		<view class="recordPage">
			<scroll-view  :scroll-top="scrollTOP" style="height: 100%;" scroll-y="true" refresher-enabled="true"   @refresherrefresh="onRefresh" :refresher-triggered="triggered" >
				<view v-for="(item,index) in listData" class="vvv1">
					<view class="tits">{{item.titleTime}}</view>
					<view v-for="(item1,index1) in item.data" style=" min-height: 160rpx;   clear: both;">
						
						<view class="left" v-if="item1.isSender==0">
							<view class="logo">
								<!-- <open-data type="userAvatarUrl" class="logo"></open-data> -->
								<image :src="https+item1.avatar" mode=""  v-if='(item1.avatar)!=""'></image>
								<image src="../../static/sj.png" mode=""  v-if='(item1.avatar)==""&&(item1.avatar)==0'></image>
								<image src="../../static/yh.png" mode=""  v-if='(item1.avatar)==""&&(item1.userOrMer)==1'></image>
							</view>
							<view class="liaot">
								<image src="../../static/left.png" mode=""></image>
								{{item1.info}}
							</view>
						</view>
						
						
						<view class="right" v-else>
						
							<view class="liaot1">
								<image src="../../static/right.png" mode=""></image>
								{{item1.info}}
							</view>
							<view class="logo">
								<open-data type="userAvatarUrl" class="logo"></open-data>
							</view>
						</view>
					</view>
				
				
				
				</view>
			</scroll-view>
		</view>
		<view class="bottom">
			<u-input v-model="value" :type="type" :border="border" class="aaa" />
			<view class="add" @click="fs">发送</view>
		</view>
	</view>

</template>

<script>
	import API from "@/api/index.js"
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
				list:'',
				page:1,
				limit:'10',
				listData:'',
				typeYM:true,
				https: getApp().globalData.picturePath,
				 triggered: false,
				 freshing:false,
				 scrollTOP:''
			};
		},
		onLoad(option) {
			if (option) {
				const item = JSON.parse(decodeURIComponent(option.item));
				this.list = item;
				wx.setNavigationBarTitle({
					title: `${item.receiverName}聊天中`
				})
				this.chatroomDetail();
			}
		},
		
		methods: {
			chatroomDetail() {
				const data = {
					chatroomId:this.list.chatroomId,
					page:this.page,
					limit:this.limit
				}
				console.log(data)
				API.chatroomDetail(data).then(res => {
					let that = this;
					
					if(res.data.length!=0){
						var newDatas = res.data;
						newDatas.reverse();
						for(var i=0;i<newDatas.length;i++){
							newDatas[i].data = (newDatas[i].data).reverse()
						}
						// that.listData = newDatas;
						if(that.page!=1){
							that.listData =  newDatas.concat(that.listData)
							// that.listData.concat(newData)
							console.log(that.listData)
						}else{
							that.listData = newDatas;
							that.scrollTOP=99999999
						}
					}else{
						that.typeYM = false;
					}
					// this.list = res.data
				})
			},
			onRefresh(){
				let that = this;
				console.log(this.typeYM)
				if(this.typeYM){
					console.log(123)
					this.triggered = true;
					setTimeout(()=>{
						this.triggered = false;
					},1000)
					this.page+=1;
					this.chatroomDetail();
					
				}else{
					this.triggered = true;
					setTimeout(()=>{
						this.triggered = false;
					},200)
				}
				
				
			},
			fs(){
				let that = this;
				this.page = 1;
				if(this.value==''){
					
				}else{
					const data = {
						chatroomId:this.list.chatroomId,
						info:this.value
					}
					API.chatroomAdd(data).then(res => {
						console.log(res)
						that.value=''
						that.chatroomDetail();
						// this.listData = (res.data).reverse();
						// console.log(this.listData)
						// this.list = res.data
					})
					
				}
			}
		}
	}
</script>

<style lang="scss">
	.bottom {
		width: 100%;
		height: 142rpx;
		background: #fff;
		position: absolute;
		bottom: 0;
	}
	.right{
		float: right;
	}
	.recordPage {
		padding: 0 30rpx;
		height: 90vh;
	}
	.vvv1{
		min-height: 200rpx;
		margin-top: 40rpx;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.left{
		clear: both;
	}

	.left,
	.right {
		display: flex;
		margin-top: 60rpx;
	}

	.liaot {
		padding: 10rpx;
		background: #fff;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #2C2C2C;
		text-align: left;
		margin-left: 40rpx;
		max-width: 530rpx;
		border-radius: 10rpx;
		position: relative;

		image {
			width: 20rpx;
			height: 30rpx;
			position: absolute;
			left: -20rpx;
		}
	}

	.liaot1 {
		padding: 10rpx;
		background: #002B56;
		;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #fff;
		text-align: left;
		margin-right: 40rpx;
		max-width: 530rpx;
		border-radius: 10rpx;
		position: relative;

		image {
			width: 20rpx;
			height: 30rpx;
			position: absolute;
			right: -20rpx;
		}
	}

	.bottom {
		display: flex;
		padding: 10rpx 30rpx 0;
		justify-content: space-between;
	}

	.aaa {
		width: 520rpx
	}

	.add {
		width: 152rpx;
		height: 72rpx;
		background: #002B56;
		border-radius: 4px;
		color: #fff;
		line-height: 72rpx;
		text-align: center;
	}
	.tits{
		text-align: center;
		margin: 30rpx 0 10rpx;
		clear: both;
	}
</style>
